<template>
   <div class="login">
       <div class='login_bg'>
            <img src="./../../static/imgs/loginbg.png">
       </div>
        <div class="login_form">
          <div class="say_ehello">
             Say eHello to the World 
          </div>
          <div class="t_img">
            <img src="../../static/imgs/hailuo2.png">
          </div>
          <div class="inputs_wrap">          
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </div>
                    <!-- <el-button :plain="true" @click="open">错误</el-button> -->
                </el-form>
          </div>
        </div>
        <div class="public_tip">
            <img src="./../../static/imgs/gg.png" alt="">
            <div class="txtTitle">
                升级公告
            </div>
            <div class="innerTxt test-1">
                <p>各位校长及老师：</p> 

                    <p>我司将于8月16日下午上线新后台，新后台的主要功能模块如下：</p>

                <p>1、权限管理-支持添加助教、销售权限，添加后销售和助教可以单独登陆新版后台，助教和销售仅能看到分配给自己的班级信息；</p>

                <p>2、账户管理-支持套餐的余额购买；</p>

                <p>3、学员管理-学员档案的管理，区分少儿和成人，支持学员档案含学员状态的添加修改以及回访记录的添加；</p>

                <p>4、体验班管理-支持体验班的添加修改、支持学员状态为注册未联系、充值未体验、有意向待体验、联系未付体验费的学员加入或移出班级，支持以体验班维度约体验课，体验班约课时学员数量无限制；</p>

                <p>5、正式班管理-支持正式班的添加修改、支持学员状态为付费学员、续费学员的学员加入或移出班级，支持以正式班维度连约班课或者散约班课，正式班约课学员数量有限制，必须大于0小于等于12；</p>

                <p>正式班约课规则：</p>

                <p>一、提前预约学期课：</p>
                <p>（1）主要分为4个学期：（部分特殊学校单独配置学期时间）</p>

                <p>春学期 2月18日-6月30日 </p>
                <p>暑假 7月1日-8月31日 </p>
                <p>秋学期 9月1日-1月25日 </p>
                <p>寒假 1月26日-2月17日 </p>
                <p>（2）提前预约时间及规则 </p>
                <p>春学期约课：</p>

                <p>1月6日-1月7日：至少一次性约14周的课 </p>
                <p>1月8日-1月9日：至少一次性约12周的课 </p>
                <p>1月10日-1月11日：至少一次性约8周的课 </p>
                <p>1月12日-1月13日：至少一次性约4周的课 </p>
                <p>暑假约课： </p>
                <p>6月19日-6月20日：至少一次性约14节课 </p>
                <p>6月21日-6月22日：至少一次性约12节课 </p>
                <p>6月23日-6月24日：至少一次性约8节课 </p>
                <p>6月25日-6月26日：至少一次性约4节课</p> 
                <p>秋学期约课：</p>
                <p>8月20日-8月21日：至少一次性约14周的课 </p>
                <p>8月22日-8月23日：至少一次性约12周的课</p> 
                <p>8月24日-8月25日：至少一次性约8周的课 </p>
                <p>8月26日-8月27日：至少一次性约4周的课 </p>
                <p>寒假约课： </p>
                <p>1月16日-1月17日：至少一次性约8节课 </p>
                <p>1月18日-1月19日：至少一次性约4节课 </p>
                <p>注：</p>
                <p>1、只要总周数、节数满足限制即可，可不连续以周为单位约课。</p>
                <p>2、特定提前约学期课时间内无法日常连约，日常连约需注意避开以上时间，以确保日常课程的进行。</p>
                <p>二、非特定时间日常连约班课</p>
                <p>（1）需要提前48h约课； </p>
                <p>（2）只能约当前学期的课，无法提前预约下一学期的课； </p>
                <p>（3） 一次连约必须大于等于6节课。</p>
               <p> 三、散约正式课</p>
                <p>（1）提前48h约课； </p>
                <p>（2）只能提前约7天内的课。 </p>
                <p>四、约课时老师支持不完全匹配展示 </p>
                <p>连约正式课时老师课程匹配率大于等于25%，即可展示出来，匹配率公式=时间段内老师开课可约课程数/班级预约课程数； </p>
                <p>注：不完全匹配的老师可展示，但是不能约课。如果想约的老师不能完全匹配需求，有两种解决方案：1）查看老师课表，调整上课时间去匹配老师开课时间；2）联系服务经理，和老师协商调整老师开课时间。
                遇到任何问题，欢迎各位校长老师随时和我们联系！</p>
            </div>
        </div>
   </div> 
</template>
<script>
import md5 from 'js-md5'
import base from '../api/base.js'
    export default {
        data: function(){
            return {
                ruleForm: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        { 
                            required: true, 
                            message: '请输入用户名', 
                            trigger: 'blur' 
                        }
                    ],
                    password: [
                        { 
                            required: true, 
                            message: '请输入密码', 
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        created(){
            if(localStorage.token){
                this.ruleForm.username=localStorage.userName;
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            url: base.baseUrl+"/school/user/login",
                            method: "POST",
                            header: { 'content-type': 'application/x-www-form-urlencoded' },
                            data:{
                                username: this.ruleForm.username,
                                password: md5(this.ruleForm.password)  
                            },
                            transformRequest: [function (data) {
                                let ret = ''
                                for (let it in data) {
                                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                                }
                                return ret
                            }],
                        }).then(res => {
                            if(res.data.code==-1){
                                this.alertTip(res.data.msg)
                            }else if(res.data.code==200){
                                localStorage.userName = res.data.data.username;
                                localStorage.token = res.data.data.token;
                                localStorage.roleid=res.data.data.roleid
                                localStorage.school_type=res.data.data.school_type
                                localStorage.refferal_code=res.data.data.refferal_code
                                this.$router.push('/');
                            }else if(res.data.code==-2){
                                this.$router.push('/login');
                            }
                        });
                    } else {

                    }
                });
            },
            alertTip(msg){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
        }
    }

</script>
<style lang="less" scoped>
    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
    @media screen and (max-width:1440px){
        .login{
            padding-top: 100px!important;
        }
        .login_bg{
           margin-top: -100px!important;
        }
        .public_tip{
            top:100px!important;
        }
    }
    .login{
        width:100%;
        height: 100%;
        box-sizing: border-box;
        // background: url('./../../static/imgs/loginbg.png');
        position: fixed;
        padding-top: 200px;
        .login_bg{
            width:100%;
            height: 100%;
            position: absolute; 
            // background-color: lightgreen; 
            margin-top: -200px;
            box-sizing: border-box;
            img{
                width:100%;
                height: 100%;
            }
        }
        .login_form{
            width: 500px;
            height: 500px;
            text-align: center;
            background-color: #ffffff;
            box-shadow: 0px 0px 43px 0px 
                rgba(4, 0, 0, 0.31);
            border-radius: 20px;
            margin: 0 auto;
            position: relative;
            // right: 220px;
            // top: 260px;
            .say_ehello{
                height: 60px;
                border-radius: 20px 20px 0 0;
                background-color: #656565;
                font-size: 22px;
                line-height: 60px;
                letter-spacing: 6px;
                color: #ffffff;
                margin-bottom: 38px;
            }
            .t_img{
                width: 140px;
                height: 140px;
                margin: 0 auto;
                >img{
                    width: 140px;
                    height: 140px;
                    border-radius: 100px;
                    // border: 1px solid #000;
                }
            }
            .inputs_wrap{
                margin-top:20px;
                padding: 0 50px;
                box-sizing: border-box;
                input{
                    height: 60px;
                    background-color: #f0f0f0;
                    border-radius: 10px;
                    border: solid 1px #d9d9d9;
                    padding-left: 40px;
                    margin-bottom:10px;
                    font-size: 20px;
                    line-height: 60px;
                    color: #4c4c4c;
                    font-family: SourceHanSansCN-Regular;
                    box-sizing: border-box;
                }
                input:focus{
                    border-radius: 10px!important;
                    outline:0 !important;
                    box-shadow:  0px 0px 4px 0px #8DBDEF;
                }
                button{
                    width: 400px;
                    height: 50px;
                    background-image: linear-gradient(0deg, 
                        #f3364d 0%, 
                        #ff4a60 100%, 
                        #8a5987 100%, 
                        #1468ad 100%, 
                        #0d5e9c 100%, 
                        #05548b 100%), 
                    linear-gradient(
                        #ff4a60, 
                        #ff4a60);
                    background-blend-mode: normal, 
                        normal;
                    border-radius: 10px;
                    font-size: 28px;
                    color: #ffffff;
                    margin-top: 10px;
                    border: none;
                }
            }
                
        }
        @media screen and (max-width: 1400px){
            .login_form{
                margin-left: 110px;
            }
        }
        .public_tip{
            width: 420px;
            height: 470px;
            position: absolute;
            right: 0;
            top:200px;
            div{
                width:380px;
                position: relative;
                top: -420px;
                left: 20px;
                // border: 1px solid #000;
                padding:0 20px;
                box-sizing: border-box;
            }
            .txtTitle{
                margin-bottom: 16px;
                color: #c51b31;
                font-size: 20px;
                text-align: center;
            }
            .innerTxt{
                font-size: 16px;
                line-height: 32px;
                padding:0 20px;
                height: 330px;
                // border: 1px solid #000;
                overflow: auto;
            }
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>

